<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ajax的使用</title>
	</head>
	<body>
        <button id="test">点击我抽奖</button>
	</body>
	<script type="text/javascript">
        const testBtn = document.getElementById("test");
        function getAjax(e){
             // 1.创建对象

             const xhr = new XMLHttpRequest();
            //2 初始化，设置请求方法和url
            xhr.open('GET','http://localhost:8000/');
            //3 发送请求
            xhr.send();
            //4 事件绑定，处理服务器返回的结果
            // readystate 是xhr对象中的相互，
            /**
             * 0 表示未初始化
             * 1 open方法已经调用
             * 2 send方法已经调用
             * 3 服务端返回部分结果
             * 4 服务端返回全部结果
             * 
             * 触发四次
             * */
            // change 事件，改变的时候触发
            xhr.onreadystatechange = function(){
                // 判断
                if(xhr.readyState === 4){

                        //判断响应状态码
                        if(xhr.status >= 200&&
                        xhr.status<300){
                               
                            // 处理结果，行 头 空行 体
                            //1.行
                            console.log(xhr.status);//状态码
                            console.log(xhr.statusText);//状态字符
                            //所有的响应头
                            console.log(xhr.getAllResponseHeaders());
                            //响应体
                            console.log(xhr.response);

                        }else{

                        }

                }
            }
        }

        function postAjax(e){

              // 1.创建对象

              const xhr = new XMLHttpRequest();
            //2 初始化，设置请求方法和url
            xhr.open('POST','http://localhost:8000/post');

            // 设置请求头
            xhr.setRequestHeader('Content-Type',
            'appliction/x-www-form-urlencoded');
            //也可以自定义，不过想要自定义头信息，要后端进行定义
            // response.setHeader('Access-Control-Allow-Headers','*'); 这样的定义
            // 初次之外，后端还需要将post修改为all可以接受所有的请求，因为自定义设置后，还会发送Option类型的鉴权请求。
            xhr.setRequestHeader('name','123')

            //3 发送请求
            //增加post参数
            // xhr.send('a=100&b=200&c=300');
            var data ={name:123,age:123};
            // xhr.send(JSON.stringify('{name:123,age:233}'));
            xhr.send(JSON.stringify(data));
            // 设置响应体类型
            xhr.responseType="json";
            // xhr.send('a:100&b:200&c:300'); 只要服务端能够解析就行
            //4 事件绑定，处理服务器返回的结果
            // readystate 是xhr对象中的相互，
            /**
             * 0 表示未初始化
             * 1 open方法已经调用
             * 2 send方法已经调用
             * 3 服务端返回部分结果
             * 4 服务端返回全部结果
             * 
             * 触发四次
             * */
            // change 事件，改变的时候触发
            xhr.onreadystatechange = function(){
                // 判断
                if(xhr.readyState === 4){

                        //判断响应状态码
                        if(xhr.status >= 200&&
                        xhr.status<300){
                            
                            //响应体
                            console.log(xhr.response);

                        }else{

                        }

                }
            }

        }
        // testBtn.addEventListener('click',getAjax);
        testBtn.addEventListener('click',postAjax);

    </script>
</html>